@import "./com.scss";
header {
    .h_top {
        width: vw(750);
        height: vw(124);
        display: flex;
        justify-content: center;
        align-items: center;

        ul {
            height: vw(100);
            width: vw(700);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        a:nth-of-type(1) li {
            width: vw(120);
            height: vw(58);
            border: 1px solid $col;
            border-radius: 30%;

            > p {
                font-size: vw(28);
                width: vw(120);
                height: vw(58);
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        li:nth-of-type(1) {
            font-size: vw(28);
        }
        img {
            width: vw(50);
            height: vw(50);
        }
    }
}

.h_bt {
    width: vw(750);
    overflow: auto;
    > ul {
        display: flex;
        width: vw(750);
        width: vw(750 * 3);
        font-size: 0;
        > li {
            display: flex;
            justify-content: center;
            width: vw(750);
            > img {
                width: vw(700);
                height: vw(260);
            }
        }
    }
}

main {
    .box {
        width: vw(750);
        height: vw(125);

        display: flex;
        justify-content: center;

        ul {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: vw(670);

            li:nth-of-type(1) {
                margin-right: vw(10);
                color: $col;
                font-size: vw(80);
            }

            li:nth-of-type(2) {
                button {
                    border: vw(1) solid $col;
                    width: vw(110);
                    height: vw(67);
                    color: #fff;
                    background-color: $col;
                    border-radius: 30%;
                    font-size: vw(30);
                }
            }
        }
    }

    .box1 {
        width: vw(750);
        height: vw(90);

        display: flex;
        justify-content: center;

        ul {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: vw(670);

            li:nth-of-type(1) {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: vw(206);
                margin-right: vw(20);

                p {
                    font-size: vw(30);
                }

                img {
                    width: vw(40);
                    height: vw(35);
                }
            }

            li:nth-of-type(2) {
                a {
                    font-size: vw(28);
                    color: #e6e6e6;
                }
            }
        }
    }

    .box2 {
        // width: vw(750);
        // height: vw(90);

        display: flex;
        justify-content: center;

        ul {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: vw(680);
            height: vw(66);
            background-color: $col;

            li {
                margin: 0 vw(10);
                color: #fff;
                font-size: vw(33);
            }

            a {
                color: #fff;
                font-size: vw(55);
                font-weight: 600;
            }
        }
    }
    .bt {
        width: vw(750);
        display: flex;
        flex-direction: column;
        align-items: center;
    
        .top {
            display: flex;
            align-items: center;
            width: vw(680);
            height: vw(200);

            ul:nth-of-type(1) {
                li {
                    display: flex;
                    align-items: center;

                    img {
                        width: vw(175);
                        height: vw(175);
                    }
                }
            }

            ul:nth-of-type(2) {
                width: vw(300);
                height: vw(200);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                margin-left: vw(20);

                li:nth-of-type(1) {
                    font-size: vw(28);
                }

                li:nth-of-type(2) {
                    > samp {
                        font-size: vw(22);
                        font-weight: 600;
                        color: #929292;
                    }
                    > img {
                        width: vw(30);
                        height: vw(30);
                    }
                }
            }

            li:nth-of-type(3) {
                font-size: vw(28);
                color: #929292;
            }

            li:nth-of-type(4) {
                a {
                    font-size: vw(22);
                    color: #ffb282;
                }
            }

            ul:nth-of-type(3) {
                width: vw(200);
                height: vw(175);
                display: flex;
                justify-content: flex-end;
                align-items: center;

                a {
                    > button {
                        border: vw(1) solid $col;
                        width: vw(110);
                        height: vw(67);
                        border-radius: 30%;
                        background-color: $col;
                        color: #fff;
                        font-size: vw(26);
                    }
                }
            }
        }
    }
}

//  尾部
nav {

    > ul {
        position: fixed;
        bottom: 0;
        background-color: #fff;
        width: vw(750);
        height: vw(110);
        display: flex;
        justify-content: space-around;
        > li {
            width: vw(70);
            height: vw(106);

            > a {
                > img {
                    width: vw(70);
                    height: vw(70);
                }
            }
            > p {
                text-align: center;
                font-size: vw(24);
            }
        }
    }
}
